/* Rating Star Display
   ========================================================================== */

.rating-stars {
	position: relative;
	display: inline-block;
	width: $gx-rating-stars-width;
	height: ($gx-rating-stars-width / 5);
	margin-bottom: 10px;
	color: $gx-rating-stars-unmarked-color;

	.rating-stars-mask {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		overflow: hidden;

		.rating-stars-inside {
			color: $gx-rating-stars-marked-color;
			display: inline-block;
			height: inherit;
			white-space: nowrap;
			width: $gx-rating-stars-width;
		}
	}

	.glyphicon,
	.fa,
	.gm-star {
		float: left;
        font-size: ($gx-rating-stars-width / 5) - 2;
		width: ($gx-rating-stars-width / 5);
	}

	[class^="gm-"]:before, [class*=" gm-"]:before {
		margin-left: 0;
	}

	@for $i from 0 through 10 {
		&.rating-stars-#{($i / 2 * 10)} > .rating-stars-mask {
			width: 1% * $i * 10;
		}
	}

	// no margin inside a single rating item
	.rating-item & {
		margin-top: 10px;
		margin-bottom: 5px;
	}
    
    .gm-star {
        &:before {
            font-family: "Font Awesome 5 Free";
            content: "\f005";
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            
            @if ($gx-rating-stars-unmarked-hollow-style) {
                font-weight: 900;
            } @else {
                font-weight: 400;
            }
        }
    }
    
    .rating-stars-mask {
        .gm-star {
            &:before {
                font-weight: 900;
            }
        }
    }
}

.rating-item {
	a.btn {
		display: none;
	}
}

.rating-stars-separate {
	color: $gx-rating-stars-marked-color;
}